<template>
  <el-card class="main" title="搜索栏的博客">
    <div class="item-hd">
      <div class="article-title" v-html="article.title" @click="$router.push({path:'/article/'+article.id})"><router-link to="/article"></router-link></div>
      <div class="item-type">
        <el-tag v-if="article.type==='原创'" effect="dark" type="success" size="mini">原创</el-tag>
        <el-tag v-if="article.type==='转载'" effect="dark" type="warning" size="mini">转载</el-tag>
      </div>
    </div>
    <div class="item-bd">
      <div class="left">
        <img class="article-coverImg" :src="article.coverImg" alt=""/>
      </div>
      <div class="right">
        <p class="article-description" v-html="article.tabloid"></p>
        <div class="item-bottom">
          <div class="item-author"><i class="el-icon-user-solid article-icon" v-html="article.author"></i></div>
          <div class="item-createTime"><i class="el-icon-date article-icon">{{ article.gmtCreate }}</i></div>
          <div class="item-tags">
<!--            <i class="el-icon-price-tag article-icon">
              <router-link
                  class="tag"
                  v-for="(tag,index) in article.tags"
                  :key="index"
                  v-text="tag"
                  :to="'/tag/'+tag"
              ></router-link>
            </i>-->
          </div>
          <div class="item-views">
            <i class="iconfont">&#xe68e; {{ article.views }}</i>
          </div>
          <div class="item-category">
            <router-link
                class="link secondary-text"
                :to="'/category/'+article.category"
            >{{ article.category }}
            </router-link>
          </div>
          <el-button class="edit-button" @click="toEdit(article.id)">去编辑</el-button>
        </div>
      </div>
    </div>
    <div id="triangle-bottomright"></div>
  </el-card>
</template>

<script>
import urls from "@/http/urls";

export default {
  name: "ArticleItem",
  props: ["article"],
  methods:{
    toEdit(id){
      window.open(urls.controlPart.editArticle+'?articleId='+id,'_blank')
    }
  }
};
</script>

<style scoped>
.main{
  position: relative;
  margin-bottom: 20px;
}
.item-type {
  position: absolute;
  right: 0px;
}
.item-hd{
  text-align: left;
  display: flex;
  position: relative;
  margin-bottom: 10px;
}
.article-coverImg {
  width: 170px;
  height: 111px;
  object-fit: fill;
}

.right {
  margin-left: 20px;
  position: relative;
}
.left {
  width: auto;
  height: auto;
}
.article-title {
  font-weight: bold;
  font-size: 19px;
  cursor: pointer;
}
.article-title:hover{
  color: red;
}

.item-bd {
  display: flex;
}

.item-bottom {
  width: 700px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom:0;
}
.item-bottom div{
  white-space: nowrap;
}
.article-icon,
.article-icon .tag {
  color: #909399;
  font-size: 13px;
  margin-right: 10px;
  text-decoration: none;
}
.edit-button {
  position: absolute;
  right: 0;
  bottom: -10px;
}
.article-icon .tag:hover {
  color: #409eff;
  cursor: pointer;
}
.item-views{
  margin-right: 20px;
}
.article-description {
  color: #999aaa;
  max-height: 64px;
  text-align: left;
  /* 内容过长显示两行，多余为省略号 */
  text-overflow:ellipsis;/*设置隐藏部分为省略号*/
  overflow: hidden;/*设置隐藏*/
  display: -webkit-box;
  -webkit-line-clamp: 3;/*设置显示行数，此处为2行，可设置其他数字*/
  -webkit-box-orient: vertical;
}
#triangle-bottomright {
  border-bottom: 33px solid red;
  border-left: 33px solid transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.4s;
}
.main:hover #triangle-bottomright{
  opacity: 1;
}
</style>
